<template>
  <div class="page__footer">
    <ul class="menus">
      <li class="menus__list" v-for="item in menus">
        <a class="menus__link"
           :class="['menus__link-' + item.icon, activeName == item.name ? 'menus__link--current':'']"
           @click="handleClickRouter(item.name)"
        >{{item.text}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
      name: 'Footer',
      props: ['active'],
      data() {
        return {
          activeName: '',
          menus: [
            {text: '主页', icon: 'home', name: 'Home'},
            {text: '专题', icon: 'special', name: 'Special'},
            {text: '关注', icon: 'concern', name: 'Concern'}
          ]
        }
      },
      methods:{
        handleClickRouter(item) {
          if(this.$route.name != item) {
            this.$router.push({name: item})
          }
        }
      },
      created() {
        this.activeName = this.active
      },
    }
</script>
